package com.example.jy1

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = Color(0xFFF5F5F5)
            ) {
                CategoryGridScreen()
            }
        }
    }
}

data class Category(
    val name: String,
    val count: Int,
    val imageRes: Int
)

@Composable
fun CategoryGridScreen() {
    val categories = listOf(
        Category("Architecture", 58, R.drawable.architecture),
        Category("Biology", 90, R.drawable.biology),
        Category("Business", 78, R.drawable.business),
        Category("Design", 423, R.drawable.design),
        Category("Engineering", 67, R.drawable.engineering),
        Category("Finance", 100, R.drawable.finance),
        Category("Gaming", 37, R.drawable.gaming),
        Category("Drawing", 326, R.drawable.drawing),
        Category("Journalism", 96, R.drawable.journalism),
        Category("Lifestyle", 305, R.drawable.lifestyle),
        Category("Painting", 172, R.drawable.painting),
        Category("Automotive", 30, R.drawable.automotive),
        Category("Crafts", 121, R.drawable.crafts),
        Category("Culinary", 118, R.drawable.curiosity),
        Category("Ecology", 28, R.drawable.ecology),
        Category("Fashion", 92, R.drawable.fashion),
        Category("Film", 165, R.drawable.film),
        Category("Geology", 290, R.drawable.geology),
        Category("History", 189, R.drawable.history),
        Category("Law", 58, R.drawable.law),
        Category("Music", 212, R.drawable.music),
        Category("Photography", 321, R.drawable.photography)
    )

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFF5F5F5))
    ) {
        // 顶部状态栏区域
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(68.dp)
                .background(Color.White),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "12:00",
                fontSize = 16.sp,
                fontWeight = FontWeight.Medium,
                color = Color.Black
            )
        }

        // 两列网格布局
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            items(categories) { category ->
                CategoryGridItem(category = category)
            }
        }
    }
}

@Composable
fun CategoryGridItem(category: Category) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(16.dp))
            .background(Color.White),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 左边图片 - 68dp × 68dp，直接贴合左边
        Image(
            painter = painterResource(id = category.imageRes),
            contentDescription = "${category.name} icon",
            modifier = Modifier
                .size(68.dp)
                .clip(RoundedCornerShape(12.dp))
        )

        Spacer(modifier = Modifier.width(16.dp))

        // 右边文字区域
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(vertical = 16.dp) // 文字区域垂直内边距16dp
        ) {
            // 分类名称
            Text(
                text = category.name,
                fontSize = 16.sp,
                fontWeight = FontWeight.Medium,
                color = Color.Black
            )

            Spacer(modifier = Modifier.height(8.dp))

            // 数量区域 - 包含小图标和数字
            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                // 小图标
                Image(
                    painter = painterResource(id = R.drawable.ic_arrow_right),
                    contentDescription = "count icon",
                    modifier = Modifier.size(12.dp)
                )

                Spacer(modifier = Modifier.width(8.dp))

                // 课程数量
                Text(
                    text = "${category.count}",
                    fontSize = 14.sp,
                    fontWeight = FontWeight.Normal,
                    color = Color.Gray
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    CategoryGridScreen()
}